$menu-background-color: $default-background-color !default;
$menu-border-radius: 2px !default;

$menu-item-padding: 0.375rem 1.25rem !default;
$menu-item-color: $charcoal-grey !default;
$menu-item-selected-color: $charcoal-grey !default;
$menu-item-icon-margin: 0 0.625rem 0 0 !default;
$menu-item-hover-background-color: $default-link !default;
$menu-item-hover-color: $white !default;
$menu-item-offset: 0.75rem;

$menu-top-item-padding: 0.8125rem 0.625rem !default;
$menu-top-item-hover-color: $default-link !default;
$menu-top-item-background-color: $menu-background-color !default;
$menu-top-item-color: $menu-item-color !default;

.rz-context-menu .rz-menu {
    flex-direction: column;
}

.rz-context-menu .rz-menu, .rz-context-menu .rz-navigation-menu {
  box-shadow: 0 10px 8px 0 rgba(58, 71, 77, 0.06);
  border: $input-border;
}

.rz-menu:not(.rz-profile-menu) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;

  background-color: $menu-top-item-background-color;

  .rz-navigation-item-link {
    color: $menu-top-item-color;
    white-space: nowrap;
  }

  .rz-navigation-item-wrapper {
    padding: $menu-top-item-padding;

    &:hover {
      .rz-navigation-item-link {
        color: $menu-top-item-hover-color;
      }
    }
  }

  .rz-navigation-item-wrapper-active {
    .rz-navigation-item-link {
      color: $menu-item-selected-color;
    }
  }

  > .rz-navigation-item {
    > .rz-navigation-item-wrapper-active {
      &:before {
        position: absolute;
        content: '';
        bottom: -2px;
        height: 1px;
        left: 0;
        right: 0;
        background-color: $menu-item-selected-color;
        margin-left: 0.75rem;
      }
    }
  }

  .rz-navigation-item {
    position: relative;
  }

  .rz-navigation-menu {
    list-style: none;
    overflow: hidden;
    position: absolute;
    padding: 0;
    margin: 0;
    min-width: 100%;
    box-shadow: 0 10px 8px 0 rgba(58, 71, 77, 0.06);

    border-radius: $menu-border-radius;
    background-color: $menu-background-color;

    .rz-navigation-item-wrapper {
      padding: $menu-item-padding;

      &:hover {
        background-color: $menu-item-hover-background-color;

        .rz-navigation-item-link {
          color: $menu-item-hover-color;
        }
      }
    }

    .rz-navigation-item-link {
      color: $menu-item-color;
      white-space: nowrap;
    }

    .rz-navigation-menu {
      position: static;
      box-shadow: none;

      .rz-navigation-item-link {
        color: $menu-item-color;
        margin-left: $menu-item-offset;
      }

      .rz-navigation-menu {
        .rz-navigation-item-link {
          margin-left: $menu-item-offset * 2;
        }

        .rz-navigation-menu {
          .rz-navigation-item-link {
            margin-left: $menu-item-offset * 3;
          }
        }
      }
    }
  }

  .rzi:not(.rz-navigation-item-icon-children) {
    margin: $menu-item-icon-margin;
  }
}

.rz-menu-toggle-item {
    display: none;
    padding: $menu-top-item-padding;
    text-align: right;
    width: 100%;
    height: 100%;
}

.rz-menu-toggle {
    appearance: none;
    background-color: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    &:active {
      background-color: transparent;
      color: inherit;
    }
}

@media (max-width: 768px) {
  .rz-menu:not(.rz-profile-menu) {
    &.rz-menu-closed {
      .rz-navigation-item {
        display: none;
      }
    }

    .rz-menu-toggle .rzi {
      margin: 0;
    }

    &.rz-menu-open {
      display: block;

      .rz-navigation-item {
        background-color: inherit;
      }

      .rz-navigation-menu {
        position: static;
        box-shadow: none;
      }
    }

    .rz-menu-toggle-item {
      display: block;
    }

    .rz-navigation-item-wrapper-active:before {
      display: none !important;
    }
  }
}